/**
 * TODOLIST 模块
 * @author Handle
 * @version 0.1
 */

const INPUT_PLACE_HOLDER = "请添加项目";
const ADD_ITEM_BTN_HTML = "Add a todo";
const SELECT_ALL_BTN_HTML = "All";
const SELECT_COMPLETE_BTN_HTML = "Complete";
const SELECT_ACTIVE_BTN_HTML = "Active";

class TodoItem {
  /**
   * @description 构造函数
   * @param {String} todoStr TODO项文字
   * @param {boolean} state 是否已经完成
   */
  constructor(todoStr, state) {
    //创建div对象
    /**
     *  @type {HTMLDivElement} dom元素
     */
    this.dom = document.createElement("div");
    this.dom.innerText = todoStr;

    /**
     *  @type {boolean} 选中状态
     */
    this.state;
    //记录状态
    if (state != null) {
      this.state = state;
    } else {
      this.state = false;
    }

    //重新指向this
    const thisObj = this;
    //绑定点击事件
    this.dom.addEventListener("click", function() {
      thisObj.changeState();
    });

    //刷新style
    this.refreshStyle();
  }
  show() {
    this.dom.style.display = "block";
  }
  hide() {
    this.dom.style.display = "none";
  }
  changeState() {
    this.state = !this.state;
    this.refreshStyle();
  }
  refreshStyle() {
    if (this.state) {
      this.dom.className = "todo-item-complete";
    } else {
      this.dom.className = "todo-item-active";
    }
  }
}

/**
 * @description 指定目标，创建一个div
 * @type {void} 无返回值
 * @param {HTMLElement} target 要操作的目标dom对象
 */
function createTODOList(target) {
  //获取到目标
  //const divElement = document.getElementById(target);
  const divElement = target;

  //三个主要部件
  const header = document.createElement("header");
  const list = document.createElement("div");
  const footer = document.createElement("footer");

  //大部件下的小部件
  const todoInput = document.createElement("input");
  const addItemBtn = document.createElement("button");

  const selectAllBtn = document.createElement("button");
  const selectCompleteBtn = document.createElement("button");
  const selectCActiveBtn = document.createElement("button");

  //基本属性设置
  todoInput.type = "text";
  todoInput.placeholder = INPUT_PLACE_HOLDER;

  addItemBtn.innerHTML = ADD_ITEM_BTN_HTML;

  selectAllBtn.innerHTML = SELECT_ALL_BTN_HTML;
  selectCompleteBtn.innerHTML = SELECT_COMPLETE_BTN_HTML;
  selectCActiveBtn.innerHTML = SELECT_ACTIVE_BTN_HTML;

  /**
   * @type {Array<TodoItem>} 存储所有TODO项目对象
   */
  let todoListObj = new Array();

  //基本className设置
  todoInput.className = "todo-input";
  addItemBtn.className = "todo-add-item";

  list.className = "todo-item-list";

  selectAllBtn.className = "todo-select-all";
  selectCompleteBtn.className = "todo-select-complete";
  selectCActiveBtn.className = "todo-select-active";

  //绑定Add a TODO按钮事件
  addItemBtn.addEventListener("click", function() {
    addItem();
  });

  //绑定文本框回车事件
  todoInput.addEventListener("keypress", function(e) {
    if (e.which == 13 || e.which == 10) {
      addItem();
      e.preventDefault();
    }
  });

  //绑定All按钮事件
  selectAllBtn.addEventListener("click", function() {
    selectBy("any");
  });

  //绑定Complete按钮事件
  selectCompleteBtn.addEventListener("click", function() {
    selectBy(true);
  });

  //绑定active按钮事件
  selectCActiveBtn.addEventListener("click", function() {
    selectBy(false);
  });

  /**
   * @description 按照特定规则过滤TODO项目
   * @type {void} 无返回值
   * @param {'any'|boolean} selector 按照选定规则过滤(T已完成/F未完成/'any')
   */
  function selectBy(selector) {
    let mode = -1;
    if (typeof selector === "string" && selector == "any") {
      mode = 0;
    } else if (typeof selector == "boolean") {
      if (selector) {
        mode = 1;
      } else {
        mode = 2;
      }
    }
    todoListObj.forEach(e => {
      switch (mode) {
        case 0:
          e.show();
          break;
        case 1:
          if (e.state) {
            e.show();
          } else {
            e.hide();
          }
          break;
        case 2:
          if (e.state) {
            e.hide();
          } else {
            e.show();
          }
          break;
        default:
      }
    });
  }

  /**
   * @description 按照特定条件筛选TODO
   * @type {void} 无返回值
   */
  function addItem() {
    const todoStr = todoInput.value;
    if (todoStr.length < 1) {
      return;
    }
    const index = todoListObj.push(new TodoItem(todoStr, false)) - 1;
    list.appendChild(todoListObj[index].dom);
    todoInput.value = null;
  }

  //组合dom对象，并输出到目标div
  header.appendChild(todoInput);
  header.appendChild(addItemBtn);

  footer.appendChild(selectAllBtn);
  footer.appendChild(selectCompleteBtn);
  footer.appendChild(selectCActiveBtn);

  divElement.appendChild(header);
  divElement.appendChild(list);
  divElement.appendChild(footer);
}

export default createTODOList;
